<template>
  <list-detail-layout class="orderDetailLayout">
    <template #detailMain>
      <order-manage-detail-main :tbData="tbData" :info="miniInfo"></order-manage-detail-main>
    </template>
    <template #detailRight>
      <div class="h100 orderDetailRight">
        <order-manage-base-info
          :detailBaseInfoData="detailBaseInfoData"
          :loading-data="spinningLoading"
          class="baseInfo"
        ></order-manage-base-info>
      </div>
    </template>
  </list-detail-layout>
</template>
<script>
import ListDetailLayout from '@/views/components/ListDetailLayout'
import OrderManageDetailMain from './OrderManageDetailMain'
import OrderManageBaseInfo from './OrderManageBaseInfo'
import orderManagementApi from '@/api/modules/system/orderManagement'
export default {
  components: {
    ListDetailLayout,
    OrderManageDetailMain,
    OrderManageBaseInfo
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    nowTime: {
      type: Number,
      default: 369852741
    },
    info: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  computed: {
    tbData () {
      if (!this.detailData) {
        return []
      }
      return this.detailData.serviceList
    },
    detailBaseInfoData () {
      if (!this.detailData) {
        return {}
      }
      const keys = [
        'orderNum',
        'goodsCode',
        'price',
        'operateSn',
        'orderType',
        'orderStatus',
        'payStatus',
        'billStatus',
        'refundStatus',
        'vin',
        'modelCode',
        'modelName',
        'trimLevel',
        'createTime',
        'payTime',
        'billTime',
        'refundTime',
        'userPhone',
        'memberPhone',
        'createBy'
      ]
      const info = {}
      keys.forEach((item) => {
        info[item] = this.detailData[item]
      })
      console.log(info)
      return info
    },
    miniInfo () {
      if (!this.detailData) {
        return {}
      }
      return {
        goodsCode: this.detailData.goodsCode,
        goodsName: this.detailData.goodsName,
        orderType: this.detailData.orderType
      }
    }
  },
  data () {
    return {
      spinningLoading: false,
      detailData: null
    }
  },
  watch: {
    nowTime: {
      handler () {
        this.getDetailData()
      },
      immediate: true
    }
  },
  methods: {
    getDetailData () {
      this.detailData = null
      if (!this.id) {
        return
      }
      this.spinningLoading = true
      orderManagementApi
        .getServiceOrderDetail({ id: this.id, goodsCode: this.info.goodsCode })
        .then((res) => {
          this.detailData = res.data
        })
        .finally(() => {
          this.spinningLoading = false
        })
    }
  }
}
</script>
<style lang="less" scoped>
.orderDetailRight {
  display: flex;
  flex-direction: column;
  .baseInfo {
    flex: none;
    padding: 24px 24px 10px 24px;
  }
  .linkedStrategy {
    flex: 1 0 0;
    overflow: hidden;
  }
}
</style>
<style lang="less">
.orderDetailLayout {
  .drawerListDetailRight {
    padding: 0 !important;
  }
}
</style>
